import 'package:flutter/material.dart';
import 'package:flutter_1911/model/common_model.dart';
import 'package:flutter_1911/model/grid_model.dart';
import 'package:flutter_1911/until/nav_until.dart';
import 'package:flutter_1911/widget/webview.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class Grid extends StatelessWidget {
  final GridModel gridNavModel;
  final String name;

  //required必填参数
  const Grid({Key? key, required this.gridNavModel, this.name = ''})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return PhysicalModel(
      color: Colors.transparent,
      //设置背景圆角
      borderRadius: BorderRadius.circular(6),
      clipBehavior: Clip.antiAlias,
      //竖排列
      child: Column(
        children: _gridItems(context),
      ),
    );
  }
  _gridItems(BuildContext context){
    List<Widget> items = [];
    //最上面展示酒店
    items.add(_gridItem(context, gridNavModel.hotel, true));
    //机票
    items.add(_gridItem(context, gridNavModel.flight, false));
    //旅游
    items.add(_gridItem(context, gridNavModel.travel, false));
    return items;
  }

  _gridItem(BuildContext context,GridItem gridNavItem,bool first){
    List<Widget> list = [];
    //获取第一个数据
    list.add(_mainItem(context,gridNavItem.mainItem));
    //这对应的是海外酒店和特价酒店
    list.add(_doubleItem(context,gridNavItem.item1, gridNavItem.item2));
    //这对应的是爆款和民宿
    list.add(_doubleItem(context,gridNavItem.item3, gridNavItem.item4));
    List<Widget> listItems = [];
    list.forEach((element) {
      //flex 用于设置剩余空间的分配权重，默认值为 1
      listItems.add(Expanded(child: element,flex: 1,));
    });
    //线性渐变的开始颜色  后面是转换成16进制
    Color start = Color(int.parse("0xff${gridNavItem.startColor}"));
    //线性渐变的结束颜色
    Color end = Color(int.parse("0xff${gridNavItem.endColor}"));
    //横排列
    return Container(
      height: ScreenUtil().setHeight(170),
      //判断是否是第一个 是第一个的话可以不用设置间距 不是第一个的话设置一个间距
      margin: first ? null : const EdgeInsets.only(top: 3),
      //装饰器
      decoration: BoxDecoration(
        //线性渐变
        gradient: LinearGradient(colors: [start, end])),
      //因为是行排列 所以用row包裹
      child: Row(children: listItems,),
    );
  }

  _mainItem(BuildContext context, CommonModel model){
    return _wrapGesture(
        context,
        Stack(
          alignment: AlignmentDirectional.topCenter,
          children: [
            Image.network(
                model.icon!,
              fit: BoxFit.contain,
              height: ScreenUtil().setHeight(200),
              width: ScreenUtil().setWidth(250),
              alignment: AlignmentDirectional.bottomEnd,
            ),
            Container(
              margin: const EdgeInsets.only(top: 11),
              child: Text(
                model.title!,
                style: const TextStyle(fontSize: 14,color: Colors.white),
              ),
            )
          ],
        ),
        model
    );
  }

  _doubleItem(BuildContext context, CommonModel topItem, CommonModel bottomItem) {
    return Column(
      children: [
        Expanded(
          child: _item(context, topItem, true),
        ),
        Expanded(
          child: _item(context, bottomItem, false),
        )
      ],
    );
  }
  _item(BuildContext context, CommonModel item, bool first) {
    BorderSide borderSide = const BorderSide(width: 0.5,color: Colors.white);
    //Expanded：等分组件 flex来设置比例,父组件必须是Flex，Row，Column
    // FractionallySizedBox：根据现有布局调整child大小，child设置的大小无效
    // FractionallySizedBox 在同一方向不允许与其他FractionallySizedBox并列，否则会出现crash
    return FractionallySizedBox(
      //撑满父布局的宽度
      widthFactor: 1,
      child: Container(
        decoration: BoxDecoration(
          border: Border(
            //设置竖边框线
            left: borderSide,
            //设置横边框线
            bottom: first ? borderSide : BorderSide.none,
          )
        ),
        child: _wrapGesture(
            context,
            Center(
              child: Text(
                item.title!,
                textAlign: TextAlign.center,
                style: const TextStyle(fontSize: 14, color: Colors.white),
              ),
            ),
            item
        ),
      ),
    );
  }

  _wrapGesture(BuildContext context, Widget widget, CommonModel model){
      return GestureDetector(
        //点击事件 跳转到webview
        onTap:(){
          NavigatorUtil.push(
              context,
            HiWebView(
              url: model.url,
              statusBarColor: model.statusBarColor,
              title: model.title,
              hideAppBar: model.hideAppBar,
            )
          );
        },
        child: widget,
      );
  }
}
